<template>
  <n-modal :show="dialogFormVisible" @onUpdateShow="close">
    <div ref="modalRef" class="edit-dia" style="width: 800px">
      <mac-header
        title="用户个人信息"
        :is-fullscreen="isFullscreen"
        :show-desc="false"
        @toggle="toggle"
        @close="close"
      />
      <n-descriptions bordered style="margin-top: 20px" :column="4">
        <n-descriptions-item label="头像">
          <n-image :src="info.avatar" width="40" style="margin-right: 10px" />
        </n-descriptions-item>
        <n-descriptions-item label="昵称">
          {{ info.nickname }}
        </n-descriptions-item>
        <n-descriptions-item label="邮箱">
          {{ info.email }}
        </n-descriptions-item>
        <n-descriptions-item label="出生年月">
          {{ info.birthday }}
        </n-descriptions-item>
        <n-descriptions-item label="个性签名" :span="4">
          {{ info.remark }}
        </n-descriptions-item>
        <n-descriptions-item label="头衔">
          <n-tag>{{ info.rank }}</n-tag>
        </n-descriptions-item>
        <n-descriptions-item label="积分">
          <n-button type="error" size="small" quaternary @click="handLog">
            {{ info.integral }}
          </n-button>
        </n-descriptions-item>
        <n-descriptions-item label="子级人数">
          <n-button size="small" quaternary @click="handChilder">
            {{ info.childer_count }}
          </n-button>
        </n-descriptions-item>
        <n-descriptions-item label="子级积分">
          {{ info.childerIntegral }}
        </n-descriptions-item>
        <n-descriptions-item label="签到天数">
          {{ info.signDay }}
        </n-descriptions-item>
        <n-descriptions-item label="购买数量">
          <n-button size="small" quaternary @click="handPhoto">
            {{ info.buy_count }}
          </n-button>
        </n-descriptions-item>
        <n-descriptions-item label="举报次数">
          <n-button size="small" quaternary @click="handReport">
            {{ info.report_count }}
          </n-button>
        </n-descriptions-item>
        <n-descriptions-item label="注册时间">
          {{ info.create_at }}
        </n-descriptions-item>
      </n-descriptions>
    </div>
  </n-modal>
  <log-list ref="logRef" />
  <photo-list ref="photoRef" />
  <report-list ref="reportRef" />
</template>
<script setup lang="ts">
import { ref, toRaw, defineAsyncComponent } from 'vue'
import {
  NModal,
  NDescriptions,
  NDescriptionsItem,
  NImage,
  NButton,
  NTag
} from 'naive-ui'
import MacHeader from '@/components/codeBlock/MacHeader'
import { useFullscreen } from '@vueuse/core'
import userApi from '@/service/api/operation/user'
const emit = defineEmits(['childer'])
const LogList = defineAsyncComponent(() => import('./LogList.vue'))
const PhotoList = defineAsyncComponent(() => import('./PhotoList.vue'))
const ReportList = defineAsyncComponent(() => import('./ReportList.vue'))
const logRef = ref()
const handLog = () => {
  logRef.value.open(toRaw(info.value))
}
const photoRef = ref()
const handPhoto = () => {
  photoRef.value.open(toRaw(info.value))
}
const reportRef = ref()
const handReport = () => {
  reportRef.value.open(toRaw(info.value))
}

const handChilder = () => {
  emit('childer', toRaw(info.value))
}

const modalRef = ref()
const { isFullscreen, toggle } = useFullscreen(modalRef)
const dialogFormVisible = ref(false)
interface infoState {
  id?: number
  avatar?: string
  nickname?: string
  email?: string
  integral?: number
  signDay?: number
  buy_count?: number
  report_count?: number
  childer_count?: number
  childerIntegral?: number
  rank?: string
  remark?: string
  birthday?: string
}
const info = ref<infoState>({})
const open = async (id: number) => {
  init(id)
  dialogFormVisible.value = true
}
const init = async (id: number) => {
  const { data } = await userApi.detail({
    user_id: id
  })
  info.value = data
}
const close = () => {
  dialogFormVisible.value = false
}

defineExpose({
  open
})
</script>
<style scoped lang="scss">
.tool {
  margin-top: 20px;
  justify-content: center;
  .success {
    margin-left: 10px;
  }
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style>
